<template>
 <el-dialog
 :title="titleText==0?'新增学科':'修改学科'"
  :visible="showDialog"
  width="400px"
  @close='close'>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules"  label-width="80px">
        <el-form-item label="学科名称"  prop="subjectName">
           <el-input  v-model="ruleForm.subjectName" placeholder="请输入学科名称" />
        </el-form-item>

        <el-form-item label="是否显示"  prop="isFrontDisplay">
          <el-switch
            :active-value="1"
            :inactive-value="0"
             v-model="ruleForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>

       <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
      <el-row slot="footer" type="flex" justify="end" align="center">
        <el-col>
          <el-button  @click="close" size="small">取消</el-button>
          <el-button @click="btnOK" type="primary" size="small">确定</el-button>
        </el-col>
      </el-row>
 </el-dialog>
</template>

<script>
import { simple, addSubjects, detail, updateSubject } from '@/api/hmmm/subjects'
export default {
  name: 'SubjectsAdd',
  data () {
    return {
      // 定义表单数据(对应接口数据)
      ruleForm: {
        subjectName: '',
        isFrontDisplay: 1 // 是否在页面显示--1是0否
      },
      // 定义校验规则
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', tirgger: 'blur' }
        ],
        isFrontDisplay: [
          { type: 'number', message: '请选择是否显示', tirgger: 'blur' }
        ]
      }
      // subjects: [] // 接收获取的学科简单列表的数据
    }
  },
  created () {},
  mounted () {},
  components: {},
  props: {
    // 控制弹层显示与隐藏
    showDialog: {
      type: Boolean,
      required: true,
      default: false
    },
    // 控制显示弹层文字的变量
    titleText: {
      type: Number,
      required: true
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 获取焦点触发 获取学科简单列表数据
    async simple () {
      try {
        this.subjects = await simple()
      } catch (err) {
        console.log(err)
      }
    },

    // 点击确定时 校验整个表单
    async btnOK () {
      try {
        await this.$refs.ruleForm.validate()
        if (this.titleText === 0) {
          // ①调用新增接口
          await addSubjects(this.ruleForm) // 新增员工
        } else {
          // 编辑接口
          await updateSubject(this.ruleForm)
        }
        // ②通知父组件重新拉数据渲染
        this.$emit('getSubjectList')
        // ③通知父组件关闭弹层
        this.$emit('update:showDialog', false)
      } catch (error) {
        console.log(error)
      }
    },

    // 点击取消，关闭弹层，重置验证
    close () {
      // 通知父组件关闭弹层
      this.$emit('update:showDialog', false)
      // 清空表单数据  代表表单所有功能重置
      this.$refs.ruleForm.resetFields()
    },

    // 获取学科详情
    async  detail (id) {
      const { data } = await detail(id)
      this.ruleForm = data
    }

  }
}

</script>

<style scoped>

</style>
